<template>
    <div v-if="link">
        <transition name="fade">
            <div
                v-show="!show"
                class="floating-button"
                :class="{ 'expanded': isExpanded }"
                :style="{ bottom: `${buttonPosition}px` }"
                @mouseenter="isExpanded = true"
                @mouseleave="isExpanded = false"
                @mousedown="startDrag"
            >
                <div class="button-content">
                    <icon
                        name="el-icon-Phone"
                        size="16"
                        class="flex mr-2"
                    />
                    <div class="text" @click.stop="show = true">在线客服</div>
                </div>
            </div>
        </transition>

        <online :show="show" @close="show = false" />
    </div>
</template>

<script lang="ts" setup>
import useAppStore from '@/stores/app'
import online from './online.vue'

const appStore = useAppStore()
const show = ref<boolean>(false)
const link = computed(() => appStore.getWebsiteConfig.customer_link)

// 按钮距离底部
const buttonPosition = ref(200)
const isExpanded = ref(false)

// 拖动相关变量
let startY = 0
let startPosition = 0
let isDragging = false

// 开始拖动
const startDrag = (event: MouseEvent) => {
    isDragging = true
    startY = event.clientY
    startPosition = buttonPosition.value
    document.addEventListener('mousemove', onDrag)
    document.addEventListener('mouseup', stopDrag)
}

// 拖动中
const onDrag = (event: MouseEvent) => {
    if (!isDragging) {
        return
    }
    const deltaY = startY - event.clientY
    const newPosition = startPosition + deltaY
    buttonPosition.value = Math.max(10, Math.min(newPosition, window.innerHeight - 100))
}

// 停止拖动
const stopDrag = () => {
    isDragging = false
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
}

// 组件卸载时清理事件监听
onUnmounted(() => {
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
})
</script>

<style lang="scss" scoped>
// 淡入淡出过渡效果
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.floating-button {
    position: fixed;
    right: 0;
    bottom: 200px;
    z-index: 1000;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.button-content {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: var(--color-white);
    background: linear-gradient(90deg, #4a6cf7, #2b3cf7);
    border-radius: 20px 0 0 20px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    transform: translateX(calc(100% - 10px));
    transition: transform 0.3s ease;
    .text {
        width: 0;
        font-size: 14px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

.expanded {
    .button-content {
        transform: translateX(0);
    }
    .text {
        width: auto;
        opacity: 1;
    }
}
</style>
